<%@page pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>注册</title>
<link rel="stylesheet" type="text/css" href="css/register.css">
<style>
.lg_m_1 p {
	position: relative;
}

.lg_m_1 .descript {
	display: inline-block;
	position: absolute;
	right: -55px;
	width: 70px;
	color: #E31515;
}

.submit {
	position: relative;
	top: -5px;
	right: 5px;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/register.js"></script>
<script type="text/javascript">
	var codeFlag = false;
	var pwdFlag = false;
	var pwdFlag2 = false;
	$(
			function() {
				// 验证账号格式
				$(".code").blur(
						function() {
							var regxCode = /^[0-9a-zA-Z_]{6,12}$/;
							var value = $(this).val();
							if (!regxCode.test(value)) {
								// console.log($(this));
								$(this).siblings("span").text("账号格式不符");
								$(this).siblings("span").css("color", 'red');
								codeFlag = false;
								return;
							} else {
								// 修改flag
								codeFlag = true;
								// 用ajax异步获取服务器返回信息
								$(this).siblings("span").load('queryCode.do',
										'usercode=' + $(this).val());
								$(this).siblings("span").css("color", 'green');
							}
						});

				// 验证密码格式
				$(".pwd_first")
						.blur(
								function() {
									var regxPwd = /^([A-Z]|[a-z]|[0-9]|[`~!@#$%^&*()+=|{}':;',\\\[\\\].<>/?~！@#￥%……&*（）——+|{}【】‘；：”“’。，、？]){8,16}$/;
									var value = $(this).val();
									if (!regxPwd.test(value)) {
										$(this).siblings("span").text("密码格式不符");
										pwdFlag = false;
										return;
									}
									pwdFlag = true;
								});

				// 判断两次密码是否相同
				$(".pwd_second").blur(function() {
					var pwd1 = $(".pwd_first").val();
					var pwd2 = $(this).val();
					// 若两次密码不一样提醒用户重新输入密码
					if (pwd1 == pwd2) {
						pwdFlag2 = true;
					} else {
						$(this).siblings("span").text("两次密码不同");
						pwdFlag2 = false;
					}
				});

			})
</script>
</head>

<body class="b">
	<div class="lg">
		<form action="register.do" method="post">
			<div class="lg_top"></div>
			<div class="lg_main">
				<div class="lg_m_1">
					<p>
						账号:<input name="code" class="code" type="text"
							placeholder="  6~12位数字字母下划线"> <span class="descript"></span>
					</p>
					<p>
						手机:<input name="phone" class="phone" type="text"
							placeholder="  11位手机号"> <span class="descript"></span>
					</p>
					<p>
						密码: <input name="pwd_first" class="pwd_first" type="password"
							placeholder="  8~16位的密码不能有空格"> <span class="descript"></span>
					</p>
					<p>
						密码: <input name="pwd_second" class="pwd_second" type="password"
							placeholder="  确认密码"> <span class="descript"></span>
					</p>
				</div>
			</div>
			<div class="lg_foot">
				<input type="submit" value="注册" class="submit"
					onclick="return codeFlag && pwdFlag && pwdFlag2;" />
			</div>
		</form>
	</div>
	<div style="text-align: center;"></div>
</body>
</html>
